<template>
  <view>
    <my-message-top :text="'猫咪医师'"></my-message-top>
    
    <view class="cat-doctor">
      <text class="cat-doctor-t1">Hi你好！
       我是你的专属猫咪医师</text>
       <scroll-view class="scroll-container" scroll-y="true">  
      <view class="cat-doctor-t2" v-if="doctorList.length === 0">tips：在本文框内输入问题，AI猫咪
医师会为您解答！
请尽可能清晰地描述病情，例如“眼角
分泌董绿色眼屎”。</view>
  <view class="child-box" v-for="(item, index) in doctorList" :key="index" v-else>  
                           <text class="cat-doctor-t3">问：{{item.question}}</text>
               <text class="cat-doctor-t4">答：{{ item.answer }}</text>  
             </view>  
           </scroll-view>
            
            <view class="cat-doctor-input">
              <uni-easyinput class="custom-input" v-model="value" trim="all" placeholder="请输入内容" @input="input()" ></uni-easyinput>
              <view class="cat-doctor-send" @click="getCatDoctor()">
                <text class="cat-doctor-t5">发送</text>
              </view>
            </view>
            

    </view>
  </view>
</template>

<script>
  import {getCatDoctor} from '../../api/cat.js'
  export default {
    data() {
      return {
      doctorList: [],
      timer: null,
      value: '',
      q: '',
      a: ''
      };
    },
    methods:{
     async getCatDoctor(){
       this.a = ''
        const {data:data} = await getCatDoctor(this.q)
        this.value = ''
        console.log(data);
        this.a = data.data
        console.log(this.a);
        const historyObj = {
          question: this.q,
          answer: this.a
        }
        console.log(historyObj);
        this.doctorList.push(historyObj)
        console.log(this.doctorList);
      },
      input(e){
        clearTimeout(this.timer)
        this.q = ''
        this.timer = setTimeout(()=>{
          this.q = e
          console.log(this.q);
        },500)
      }
    }
  }
</script>

<style lang="scss">
.cat-doctor{
  margin: 45rpx 35rpx;
  .cat-doctor-t1{
    font-size: 20px;
    font-weight: bold;
    color: #333333
  }
  .scroll-container{
    width: 685rpx;
    height: 1292rpx;
    border: 1px solid #707070;
    border-radius: 25rpx;
    margin-top: 35rpx;
    .cat-doctor-t2{
      font-size: 15px;
      color: #868686;
      padding-left: 100rpx;
      padding-top: 100rpx;
      padding-right: 100rpx;
    }
    .child-box{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      margin-top: 35rpx;
      .cat-doctor-t3{
        font-size: 15px;
        font-weight: bold;
        color: #333333;
        padding: 25rpx 25rpx;
      }
      .cat-doctor-t4{
        font-size: 15px;
        font-weight: bold;
        color: #333333;
        padding: 25rpx 50rpx;
      }
    }
  }
  .cat-doctor-input{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 50rpx;
    .uni-easyinput__content{
      width: 450rpx;
    }
    .cat-doctor-send{
      width: 200rpx;
      height: 75rpx;
      background-color: #FFCC71;
      border-radius: 25rpx;
      text-align: center;
      .cat-doctor-t5{
        font-size: 15px;
        font-weight: bold;
        color: #666666;
        line-height: 75rpx;
      }
    }
  }
}
</style>
